<!-- 通用表单组件 -->
<template>
  <div class="page_table">

    <div class="title">
      {{ tableConfig.title }}
    </div>
    <!-- 头部插槽 -->
    <div class=" header-container">
      <slot name="header"></slot>
    </div>
    <!-- 表 -->
    <el-table    :data="tableData" v-bind="tableConfig.childrenProps" @selection-change="handleSelectionChange"
      class="my_table">
      <!-- 多选 -->
      <el-table-column v-if="tableConfig.showIndex" align="center" type="selection">
      </el-table-column>
      <!-- 排序 -->
      <el-table-column v-if="tableConfig.showSelection" width="80" align="center" type="index" :index="indexMethod"
        label="序号">
      </el-table-column>
      <template v-for="item in tableConfig.propsList" :key="item.prop">
        <el-table-column align="center" v-bind="item">
          <template #default="{ row }">
            <slot :name="item.slotName" :row="row"> {{ row[item.prop] }} </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 底部插槽 -->
    <div class=" footer" v-if="tableConfig.showPaging">
      <slot name="footer">
        <el-pagination :currentPage="page.currentPage" :page-size="page.pageSize" :page-sizes="[2, 5, 10, 20, 30,]"
          small background layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />

      </slot>
    </div>
  </div>
</template>
<script setup lang='ts' >
import { PropType, reactive } from "vue"
import type { ITableConfig } from "../types.ts"

const props = defineProps({
  tableData: {
    type: Array,
    required: true
  },
  tableConfig: {
    type: Object as PropType<ITableConfig>,
    required: true
  },
  total: {
    type: Number,
    required: true
  },
  page: {
    type: Object,
    default: () => {
      currentPage: 1
      pageSize: 10
    },
  }
})

let pages = reactive(props.page)

const emit = defineEmits(['selectionChange', 'update:page'])
// 多选框事件
const handleSelectionChange = (value: any) => {
  emit('selectionChange', value)
}

const handleSizeChange = (pageSize: number) => {

  pages = { ...props.page, pageSize, ['currentPage']: 1 }
  emit('update:page', { ...pages })
}

const handleCurrentChange = (currentPage: number) => {
  pages = { ...props.page, currentPage }
  emit('update:page', { ...pages })

}
// index 排序
const indexMethod = (index: number) => {
  return ((pages.currentPage - 1) * pages.pageSize) + index + 1
}

</script>
<style lang='less' scoped>
.page_table {
  background: #fff;
  padding: 20px;
  scrollbar-width: none; /* firefox */


  .header-container {
    padding: 10px;
    padding-left: 20px;
  }

  .title {
    padding-top: 10px;
    text-align: center;
    font-size: 1.2em;
  }
}

.my_table {
  padding: 0 15px 0 10px;
  margin-bottom: 10px;
}

.footer {
  padding: 10px;
  text-align: right;

}

.table_head {
  text-align: center;
}
</style>
